import React, { Fragment, useEffect, useState } from 'react';
import { Row, Col, Content, Media, MediaBanner } from 'react-fule-ui';
import './index.scss';
const mediaData = [
  {
    img: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1595927774713_v1gesmoo8cr57y14i.jpeg',
    title: '111一标题标题标题标题标题标题一标题标题标题标题标题标题',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM5tg8GfUdFpM0bxRl4u6a5hYPZLqAtibVvZVvIV5CgTxvQ/0',
    title: '一标题标题标题标题标题标题一标题标题标题标题标题标题',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://imgcache.qq.com/open_proj/proj_qcloud_v2/rocket_images/1595927774713_v1gesmoo8cr57y14i.jpeg',
    title: '333一标题标题标题标题标题标题一标题标题标题标题标题标题',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://api2.mubu.com/v3/photo/15c46742-614f-4b3f-ac45-47db804bce21.jpg',
    title: '一标题标题标题标题标题标题',
    des: '描述描述描述描述描述描述描',
  },
];
const mediaData1 = [
  {
    img: 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM5tg8GfUdFpM0bxRl4u6a5hYPZLqAtibVvZVvIV5CgTxvQ/0',
    title: '二标题标题标题标题标题标题一标题标题标题标题标题标题',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM5tg8GfUdFpM0bxRl4u6a5hYPZLqAtibVvZVvIV5CgTxvQ/0',
    title: '二标题标题标题标题标题标题一标题标题标题标题标题标题',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM5tg8GfUdFpM0bxRl4u6a5hYPZLqAtibVvZVvIV5CgTxvQ/0',
    title: '二标题标题标题标题标题标题一标题标题标题标题标题标题',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://wx.qlogo.cn/mmhead/Q3auHgzwzM5tg8GfUdFpM0bxRl4u6a5hYPZLqAtibVvZVvIV5CgTxvQ/0',
    title: '二标题标题标题标题标题标题',
    des: '描述描述描述描述描述描述描',
  },
];
const mediaData2 = [
  {
    img: 'https://api2.mubu.com/v3/photo/15c46742-614f-4b3f-ac45-47db804bce21.jpg',
    title: '三三三是哪',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://api2.mubu.com/v3/photo/15c46742-614f-4b3f-ac45-47db804bce21.jpg',
    title: '三三三是哪',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://api2.mubu.com/v3/photo/15c46742-614f-4b3f-ac45-47db804bce21.jpg',
    title: '三三三是哪',
    des: '描述描述描述描述描述描述描述描述描述描述描述描述',
  },
  {
    img: 'https://api2.mubu.com/v3/photo/15c46742-614f-4b3f-ac45-47db804bce21.jpg',
    title: '三三三是哪',
    des: '描述描述描述描述描述描述描',
  },
];
const tabData = [
  {
    title: '',
    Arr: mediaData,
  },
  {
    title: '',
    Arr: mediaData1,
  },
  {
    title: '',
    Arr: mediaData2,
  },
];
export default function FuleBanner(props) {
  const [show, setShow] = useState(false);
  const wi = () => {
    if (window.innerWidth < 768) {
      setShow(!show);
    }
  };
  useEffect(() => {
    wi();
    window.onresize = () => {
      wi();
    };
    return () => {
      window.onresize = null;
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [true]);
  return (
    <Fragment>
      <Content>
        <Content.Header>Banner</Content.Header>
        <Content.Body>
          {/* pc */}
          {!show ? (
            <MediaBanner
              interval="4000"
              autoPlay={false}
              num={0}
              dotDom
              dotAction={true}
              space={0}
            >
              {tabData.map((item, index) => (
                <MediaBanner.Item index={index} key={`mediaBanner-${index}`}>
                  <Row gutter={[20, 20]}>
                    {item.Arr.map((items, index1) => (
                      <Col colSpan={6} key={`col${index1}`} phone={24}>
                        <Media data={items} card motion shadow />
                      </Col>
                    ))}
                  </Row>
                </MediaBanner.Item>
              ))}
            </MediaBanner>
          ) : (
            <MediaBanner
              interval="3000"
              autoPlay={true}
              num={0}
              dotDom
              dotAction
              space={40}
            >
              {mediaData.map((item, index) => (
                <MediaBanner.Item index={index} key={`mediaBanner-${index}`}>
                  <Row gutter={[20, 20]}>
                    <Col colSpan={6} phone={24}>
                      <Media data={item} card motion shadow />
                    </Col>
                  </Row>
                </MediaBanner.Item>
              ))}
            </MediaBanner>
          )}
          {/* 移动 */}
        </Content.Body>
      </Content>
    </Fragment>
  );
}
